<template>
  <div>
    <div v-show="showSignDay" @click.stop="closeSignDay" class="c-flex-row c-flex-center c-pf c-p-t0 c-p-l0 c-pz101 c-h c-w100 c-translucent-balck60">
      <img @click.stop="clickImg" src="" class="c-w80 c-br8 c-m-0auto" id="pointSpreadImg" />
    </div>
    <article class="canvasBox" :class="signDayInfo.word.length > 0&&signDayInfo.enableDcWord ? 'height1314 width730':'height1080 width670'" id="pointsCanvas" v-if="showContent && signDayInfo">
      <section class="width670 c-text-hidden c-p" :class="signDayInfo.word.length == 3&&signDayInfo.enableDcWord ? 'height950':signDayInfo.word.length == 2&&signDayInfo.enableDcWord ? 'height1015' : 'height1080'">
        <img class="width670" :src="signDayInfo.cardCover" alt="">
        <div class="translucent-box c-flex-row c-aligni-center">
          <div class="padding-r20 c-flex-grow1 c-w0">
            <div class="padding-t30 c-text-ellipsis1" v-if="signDayInfo.fontDescTypeArr.indexOf(1) > -1">我是{{signDayInfo.nickname<10?signDayInfo.nickname:signDayInfo.nickname.substring(0, 10)+'...'}}</div>
            <div class="padding-b10 padding-t4" v-if="signDayInfo.fontDescTypeArr.indexOf(2) > -1">我在{{signDayInfo.companyName}}坚持学习{{signDayInfo.hasSignNum}}天</div>
            <div class="padding-b30">{{signDayInfo.date}}</div>
          </div>
          <div class="c-pv20">
            <img class="qrcode-img" :src="$addXossFilter(signDayInfo.qrcodeUrl)" alt="">
            <div class="long-text">长按识别二维码</div>
          </div>
        </div>
      </section>
      <section class="padding-t30" v-if="signDayInfo.word.length > 0&&signDayInfo.enableDcWord">
        <img class="img-point" :src="require('@/assets/i/wap/points/icon_start_text.png')" alt="">
        <div class="word-text" :style="'color:' + signDayInfo.fontColor" v-for="(item, index) in signDayInfo.word" :key="index">
          {{item.content}}
        </div>
        <div class="c-flex-row c-justify-end">
          <img class="img-point" :src="require('@/assets/i/wap/points/icon_end_text.png')" alt="">
        </div>
      </section>
    </article>
  </div>
</template>

<script>
// import { html2canvas } from '@/utils/html2canvas.js'
import { utilJs } from "@/utils/common.js";
let html2canvas = null;
export default {
  name: "pointsDaySign",
  components: {},
  props: {
    showSignDay: {
      type: Boolean,
      default: false
    },
    signDayInfo: {
      type: Object,
      default: null,
    }
  },
  watch: {
    signDayInfo(val) {
      if (val) {
        this.signInfo = val;
        console.log("开始绘制");
        this.$nextTick(() => {
          import(/* webpackChunkName: "html2canvas" */"@/utils/html2canvas.js").then(res => {
            html2canvas = res.default;
            this.startCanvas();
          })
        })
      }
    }
  },
  data() {
    return {
      showContent: true,
    };
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    clickImg() { },

    closeSignDay() {
      this.$emit("closeSignDay");
    },
    startCanvas(index) {
      let domTest = document.getElementById("pointsCanvas");
      if (!domTest) {
        return;
      }
      html2canvas(domTest, { useCORS: true }).then(canvas => {
        let ctx = canvas.getContext("2d");
        this.canvasToImage(ctx);
      });
    },
    canvasToImage(ctx) {
      try {
        let dataURL = ctx.canvas.toDataURL("image/png?x-oss-process=style/common");
        document.getElementById("pointSpreadImg") && document.getElementById("pointSpreadImg").setAttribute("src", dataURL);
        this.showContent = false;
      } catch (err) {
        console.log(err.message);
        console.log(err.stack);
      }
    },
  },
  deactivated() { }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.canvasBox {
  top: -999999999px;
  left: -30000000px;
  z-index: -999;
  position: absolute;
  background-color: #fff;
}
.width730 {
  width: 730px;
}
.height1314 {
  height: 1314px;
  padding: 30px;
}
.width670 {
  width: 670px;
}
.height950 {
  height: 950px;
}
.height1015 {
  height: 1015px;
}
.height1080 {
  height: 1080px;
}
.translucent-box {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 670px;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 28px;
  color: #fff;
  padding: 0 30px;
}
.padding-r20 {
  padding-right: 20px;
}
.padding-t30 {
  padding-top: 30px;
}
.padding-b30 {
  padding-bottom: 30px;
}
.padding-b10 {
  padding-bottom: 10px;
}
.padding-t4 {
  padding-top: 4px;
}
.qrcode-img {
  width: 140px;
  height: 140px;
}
.long-text {
  font-size: 18px;
  text-align: center;
  padding-top: 4px;
}
.img-point {
  width: 30px;
  height: 28px;
}
.word-text {
  padding: 10px 50px;
  font-size: 32px;
  font-weight: 600;
}
</style>

